<!--
 * @Description: 利润分析管理页面
-->
<template>
  <BaseMainSlot>
    <template v-slot:searchbox>
      <!-- <FilterBtns /> -->
      <div class="label-input mr-20">
        <div class="label">时间选择:</div>
        <div class="input">
          <StartTimeEndTimeSelectionBox :datetime="'date'" @startVal="startVal" @endVal="endVal" />
        </div>
      </div>
      <div class="search ml-20">
        <img src="~@/assets/action-bar-icon/search.png" @click="search" />
      </div>
    </template>
    <template v-slot:tablebox>
      <el-table
        ref="tableData"
        v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        height="88%"
        :default-sort="{ prop: 'happendTime', order: 'ascending' }"
        @row-click="handleEdit"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column
          prop="happendTime"
          sortable
          :formatter="formatter"
          label="时间"
        />
        <el-table-column prop="incomeCost" label="收入(元)" />
        <!-- <template slot-scope="scope">
            {{ !scope.row.incomeCost ? 0 : scope.row.incomeCost }}
          </template>
        </el-table-column> -->
        <el-table-column prop="inputCost" label="支出(元)" />
        <!-- <template slot-scope="scope">
            {{ !scope.row.inputCost ? 0 : scope.row.inputCost }}
          </template> -->
        <!-- </el-table-column> -->
        <el-table-column prop="profit" label="利润(元)" />
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
    <template v-slot:formLeft>
      <div>月收入支出对比</div>
      <echartsone :cdata="findMonth" :nowwidth="'800px'" />
    </template>
    <template v-slot:formRight>
      <div>近15日收入支出对比</div>
      <echartsone :cdata="findday" :nowwidth="'800px'" />
    </template>
  </BaseMainSlot>
</template>

<script>
import Pagination from "@/components/Pagination";
import echartsone from "@/components/Echarts/components/linechart/chart.vue";
import baseOutut from "@/api/digital-operation/input-output-management/profit-analysis";
import BaseMainSlot from "../components/shangxia.vue";
import StartTimeEndTimeSelectionBox from "@/components/StartTimeEndTimeSelectionBox/index.vue";
import { mymixin } from "@/utils/mixin";
import * as echarts from "echarts";

// import { getToken } from '@/utils/auth';
export default {
  name: "",
  components: { Pagination, echartsone, BaseMainSlot, StartTimeEndTimeSelectionBox },
  mixins: [mymixin],
  data() {
    return {
      obj: {
        name: ""
      },
      logoImg: require("@/assets/logo.png"),
      // ----上传图片相关---
      // 图片地址
      imageurl: "",
      startTime: "",
      endTime: "",
      // 投入类型列表
      inputTypeList: [],
      // 设施名称
      installationName: "",
      rules: {},
      // 选中的设施id数组 ID组成
      incomeCostIdList: [],
      tabtype: false,
      // 柱状图相关值
      findday: {
        xAxisdata: [],
        xData: [],
        seriesData: []
      },
      findMonth: {
        xAxisdata: [],
        xData: [],
        seriesData: []
      },
      descending: { order: "descending" }
    };
  },
  watch: {},
  created() {
    this.getfindday();
    this.getfindMonth();
  },
  mounted() {
    // 获取表格数据
    this.getTableDataList();
  },
  methods: {
    getTableDataList() {
      // let timeone = this.dateToFormat(Date.now() - 60 * 24 * 60 * 60 * 1000);
      // let timetwo = this.dateToFormat(Date.now() + 30 * 24 * 60 * 60 * 1000);
      this.loading = true;
      let params = {
        startTime: this.startTime,
        endTime: this.endTime,
        pageNumber: this.currentPage,
        pageSize: this.pageSize
      };
      baseOutut.getPageList(params).then(res => {
        this.loading = false;
        let data = res.data;
        // console.log(data);
        if (data) {
          data.content.forEach(item => {
            if (item.incomeCost) {
              item.incomeCost;
            } else {
              item.incomeCost = 0;
            }
            if (item.inputCost) {
              item.inputCost;
            } else {
              item.inputCost = 0;
            }
          });
          this.totalSize = data.totalElements;
          this.tableData = data.content;
          this.addblankmet();
          this.resetActionBar();
        }
      });
    },
    // 月收入支出对比
    getfindMonth() {
      baseOutut.getfindMonthList({ }).then(res => {
        this.loading = false;
        let data = res.data;
        // console.log(data);
        if (data) {
          let xAxisdata = []; // x轴数据
          let seriesData = [];
          let yinputdata = []; // y轴支出数据
          let yincomedata = []; // y轴支出数据

          data.forEach((item, index) => {
            let year = item.month.substring(0, 4);
            let mon = item.month.substring(5, 7);
            item.month = `${year}-${mon}`;
            xAxisdata[index] = `${year}-${mon}`;
            if (item.inputCost === undefined) {
              item.inputCost = 0;
            }
            if (item.incomeCost === undefined) {
              item.incomeCost = 0;
            }
            yinputdata[index] = item.inputCost;
            yincomedata[index] = item.incomeCost;
          });
          this.findMonth.xAxisdata = xAxisdata;
          seriesData.push(
            {
              name: "月收入(元)",
              type: "bar",
              data: yincomedata,
              barWidth: 20,
              itemStyle: {
                borderRadius: 5,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "#04FA99" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            },
            {
              name: "月支出(元)",
              type: "bar",
              data: yinputdata,
              barWidth: 20,
              itemStyle: {
                borderRadius: 5,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "yellow" },
                  { offset: 1, color: "red" }
                ])
              }
            }
          );
          this.findMonth.seriesData = seriesData;
          // console.log(this.findMonth)
          this.tabtype = true;
        }
      });
    },
    getfindday() {
      baseOutut.getfinddayList({ }).then(res => {
        this.tabtype = false;
        // this.loading = false;
        let data = res.data;
        // console.log(data);
        if (data) {
          let xAxisdata = []; // x轴数据
          let seriesData = [];
          let yinputdata = []; // y轴支出数据
          let yincomedata = []; // y轴支出数据
          data.forEach((item, index) => {
            let year = item.happendTime.substring(5, 7);
            let mon = item.happendTime.substring(8, 10);
            item.happendTime = `${year}-${mon}`;
            xAxisdata[index] = `${year}-${mon}`;
            if (item.inputCost === undefined) {
              item.inputCost = 0;
            }
            if (item.incomeCost === undefined) {
              item.incomeCost = 0;
            }
            yinputdata[index] = item.inputCost;
            yincomedata[index] = item.incomeCost;
          });
          this.findday.xAxisdata = xAxisdata;
          seriesData.push(
            {
              name: "日收入(元)",
              type: "bar",
              data: yincomedata,
              barWidth: 20,
              itemStyle: {
                borderRadius: 5,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "#04FA99" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            },
            {
              name: "日支出(元)",
              type: "bar",
              data: yinputdata,
              barWidth: 20,
              itemStyle: {
                borderRadius: 5,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "yellow" },
                  { offset: 1, color: "red" }
                ])
              }
            }
          );
          this.findday.seriesData = seriesData;
          // console.log(this.findday)
          this.tabtype = true;
        }
      });
    },
    formatter(row, column) {
      return row.happendTime;
    },
    // 搜索框时间
    startVal(e) {
      this.startTime = e
    },
    endVal(e) {
      this.endTime = e
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
      this.getfindMonth()
      this.getfindday()
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    handleEdit(row) {
      // TODO 点击行元素后 edit
      this.formData = row;
      this.editActive = true;
      this.saveActive = false;
      this.cancelActive = true;
      this.canInput = false;
    },
    handleSelectionChange(list) {
      this.incomeCostIdList = [];
      this.incomeCostIdList = list.map(item => item.incomeCostId);
      if (this.incomeCostIdList.length > 0) this.delActive = true;
      else this.delActive = false;
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
// 图片上传相关
// .imagesty .el-upload .el-upload-list--picture-card .el-upload-list__item {
//   background-color: #11c96d !important;
//   border: 1px solid #4797e2;
// }
.el-upload--picture-card {
  background-color: #145da7 !important;
}
// end
::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
}
::v-deep .el-form-item__label {
  min-width: 150px;
}
.dialog {
  ::v-deep .el-dialog__title {
    font-weight: bold;
  }
  .qrCode {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.staff-manage {
  .common-layout {
    .content {
      width: 100%;
      ::v-deep .table-box {
        height: 40% !important ;
      }
    }
  }
}
.form {
  justify-content: space-between;
}
.left-box {
  width: 100%;
  height: 340px;
  display: flex;
  flex-direction: column;
  align-content: center;
  // background-color: #00a1c2;
  margin-left: 1%;
  // border-left: 1px dashed $borderColor;
  padding-left: 20px;
  .content {
    height: calc(100% - 200px);
  }
  .content-one {
    height: calc(100% - 200px);
  }
}
.right-box {
  width: 100%;
  height: 340px;
  display: flex;
  flex-direction: column;
  align-content: center;
  // background-color: #00a1c2;
  margin-left: 1%;
  // border-left: 1px dashed $borderColor;
  padding-left: 20px;
  .content {
    height: calc(100% - 200px);
  }
  .content-one {
    height: calc(100% - 200px);
  }
}
.tags {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .tag-item {
    height: 30px;
    padding: 5px 10px;
    background-color: #00a1c2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-right: 10px;
    i {
      font-size: 14px;
    }
  }
}
.el-table {
  height: 80% !important;
}
::v-deep .chart {
  width: 800px !important;
  height: 300px !important;
}
::v-deep canvas {
  width: 800px !important;
  height: 300px !important;
}
::v-deep .className {
  width: 800px !important;
  height: 300px !important;
}
</style>
